<template>
  <div class="inventory-box wh-100">
    <h2 class="titletext">商品库存</h2>
    <!-- echarts库存图标 -->
    <div class="echartsbox" ref="inventorydom"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { customAlphabet } from "nanoid";
import { productList } from "@/api/user.js";
export default {
  name: "InventoryComp",
  components: {},
  data() {
    return {
      charts: null,
      echartsData: 50,
      stock: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
        g: "",
      },
    };
  },
  methods: {
    // 初始化图标
    initCharts() {
      this.charts = echarts.init(this.$refs.inventorydom);
      this.setOptionFun();
    },
    // 设置图标数据，生成图标
    setOptionFun() {
      const option = this.getOption();
      this.charts.setOption(option);
    },
    // 获取数据
    getOption() {
      const option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: true },
          },
        },

        series: [
          {
            name: "",
            type: "pie",
            radius: [5, 60],
            center: ["50%", "40%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 4,
            },
            data: [
              {
                value: this.stock,
                name: this.echartsData[1].category,
              },
              {
                value: this.stock.a,
                name: this.echartsData[44].category,
              },
              {
                value: this.stock.b,
                name: this.echartsData[10].category,
              },
              {
                value: this.stock.c,
                name: this.echartsData[40].category,
              },
              {
                value: this.stock.d,
                name: this.echartsData[16].category,
              },
              {
                value: this.stock.e,
                name: this.echartsData[90].category,
              },
              {
                value: this.stock.f,
                name: this.echartsData[20].category,
              },
              {
                value: this.stock.g,
                name: this.echartsData[80].category,
              },
            ],
          },
        ],
      };
      return option;
    },
    // 本函数 写 监听 container DOM 元素大小的改变
    watchContainerResize() {
      // 作用：监听 指定 DOM 元素 大小的改变
      this.observeContainer = new ResizeObserver(() => {
        this.charts.resize();
      });
      this.observeContainer.observe(this.$refs.inventorydom);
    },
  },
  mounted() {
    // 库存量数据
    const nanoid = customAlphabet("123456789", 4);
    this.stock.a = nanoid();
    this.stock.b = nanoid();
    this.stock.c = nanoid();
    this.stock.d = nanoid();
    this.stock.e = nanoid();
    this.stock.f = nanoid();
    this.stock.g = nanoid();

    productList().then((res) => {
      // console.log(res);
      this.echartsData = res.data;

      // 初始化图标
      this.initCharts();
      this.watchContainerResize();
    });
  },
};
</script>

<style scoped lang="scss">
.inventory-box {
  .titletext {
    font-size: 14px;
    font-weight: normal;
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  .echartsbox {
    width: 100%;
    height: calc(100% - 70px);
    box-sizing: border-box;
  }
}
</style>
